<template>
  <Modal v-model="isOpen" title="导出看板" class="board-export">
    <div class="export-options">
      <div class="format-select">
        <h3>导出格式</h3>
        <div class="radio-group">
          <label>
            <input 
              type="radio" 
              v-model="format" 
              value="json"
            > JSON
          </label>
          <label>
            <input 
              type="radio" 
              v-model="format" 
              value="csv"
            > CSV
          </label>
          <label>
            <input 
              type="radio" 
              v-model="format" 
              value="pdf"
            > PDF
          </label>
        </div>
      </div>

      <div class="content-select">
        <h3>导出内容</h3>
        <div class="checkbox-group">
          <label>
            <input 
              type="checkbox" 
              v-model="includeArchived"
            > 包含已归档的卡片
          </label>
          <label>
            <input 
              type="checkbox" 
              v-model="includeActivity"
            > 包含活动记录
          </label>
          <label>
            <input 
              type="checkbox" 
              v-model="includeAttachments"
            > 包含附件
          </label>
        </div>
      </div>
    </div>

    <div class="export-actions">
      <button 
        class="primary"
        @click="exportBoard"
        :disabled="exporting"
      >
        {{ exporting ? '导出中...' : '导出' }}
      </button>
    </div>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import { useBoardStore } from '../../stores/board';
import Modal from '../Common/Modal.vue';

const props = defineProps({
  board: {
    type: Object,
    required: true
  },
  isOpen: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:isOpen']);

const boardStore = useBoardStore();
const format = ref('json');
const includeArchived = ref(false);
const includeActivity = ref(true);
const includeAttachments = ref(false);
const exporting = ref(false);

const exportBoard = async () => {
  exporting.value = true;
  try {
    const response = await boardStore.exportBoard({
      boardId: props.board._id,
      format: format.value,
      options: {
        includeArchived: includeArchived.value,
        includeActivity: includeActivity.value,
        includeAttachments: includeAttachments.value
      }
    });
    
    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${props.board.title}.${format.value}`);
    document.body.appendChild(link);
    link.click();
    link.remove();
  } catch (error) {
    console.error('Export failed:', error);
  } finally {
    exporting.value = false;
  }
};
</script>

<style scoped>
.board-export {
  width: 480px;
  max-width: 90vw;
}

.export-options {
  margin: 16px 0;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.export-actions {
  margin-top: 24px;
  text-align: right;
}

.primary {
  background: #0079BF;
  color: white;
  padding: 8px 16px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.primary:disabled {
  background: #A5ACB0;
  cursor: not-allowed;
}
</style> 